<script setup>
import { RouterView } from "vue-router";
import { getToken } from "@/utils/auth";
import store from "@/store";
import lastRecord from "@/api/record/lastRecord";
import { onMounted } from "vue";
import questionItemApi from "@/api/questionItem/questionItem";
import { setupWebSocket, closeWebSocket } from "@/utils/websocket";

let websocket = null;

const getTest = async function () {
  const res = await questionItemApi.getCountByAccount();
  store.dispatch("learn/setPaperCount", res.data);
};

onMounted(() => {
  if (getToken()) {
    lastRecord.getLastRecord().then((res) => {
      store.dispatch("learn/setSelectValue", res.data.chatperName);
      store.dispatch("learn/setSelectedId", res.data.selectedId);
    });
    if (!websocket) {
      setupWebSocket(getToken());
    }
    // 页面可见性变化的回调方法
    document.addEventListener("visibilitychange", function () {
      if (document.hidden) {
        // 页面被隐藏，关闭 WebSocket 连接
        closeWebSocket();
      } else {
        if (websocket) {
          // 页面可见，重新建立 WebSocket 连接
          setupWebSocket(getToken()); // 注意，这里可能需要调整逻辑，以避免不断重建连接
        }
      }
    });
    getTest();
  }
});
</script>

<template>
  <div class="app-container">
    <RouterView />
  </div>
</template>

<style>
body {
  background-color: #f5f7fa;
}
.app-container {
  /* width: 100%; */
  /* height: 100vh; */
  background-color: rgb(242, 242, 242);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  /* 禁用长按选中功能 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
</style>
